
@import '@/styles/common/variables.scss';
.concatUs{
  font-size: 0;
  padding-top: 80px;
  position: relative;
 
  >img{
    width: 100%;
    height: 160px;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
  .el-form{
    width: $formW;
    margin: auto;
    box-shadow: 0 0 8px 0 rgba(25, 25, 25, 0.12);
    border-radius: 16px;
    overflow: hidden;
    font-size: 14px;
    background-color: $color_9;
    z-index: 10;
    position: relative;
    height: auto;
    .module_title{
      background-color: rgba(222, 224, 219, 0.2);
      padding: 40px;
      text-align: center;
      .module_title_t{
        font-size: 24px;
        color: $color_7;
        padding-bottom: 8px;
      }
      .module_title_s{
        color: $color_8;
      }

    }
    .module_form{
      padding: 40px 40px 24px;
      .module_form_label{
        margin-bottom: 8px;
        .icon-Required{
          margin-right: 4px;
          position: relative;
          top: -2px;
          width: 6px;
          height: 6px;
        }
        span{
          font-size: 14px;
          color: $color_1;
        }
      }
      .el-form-item{
        margin-bottom: 24px;
        .el-form-item__content{
          .el-select{
            width: 100%;
          }
        }
      }
      .btn_module{
        margin-top: 40px;
        .el-button + .el-button{
          margin-left: 16px;
        }
        .el-button{
          width: 100%;
          &.next{
            width: 240px;
          }
          &.submit{
            width: 360px;
          }
        }
      }
      
    }
    .module_link{
      padding: 0 40px  40px;
      p{
        margin-bottom: 8px;
        &:last-of-type{
          margin-bottom: 0;
        }
        a{
          text-decoration: none;
          color: $color_12;
          font-size: 14px;
          &:hover{
            color: $color_7;
          }
        }
      }
    
    }
  }

  .image_div{
    margin-top: 8px;
    .avatar-uploader{

      .el-upload {
        height: 100%;
        width: 100%;
        .addimage{
          height: 100%;
          width: 100%;
          border: 1px solid $color_10;
          color:  $color_10;
          border-radius: 4px;
          display: flex;
          align-items: center;
          justify-content: center;
          position: absolute;
          top: 0;
          left: 0;
          svg{
            width: 32px;
            height: 32px;
            &.svgHover{
              display: none;
            }
            &.svgNormal{
              display: inline-block;
            }
          }
    
          &:hover{
            color: $color_7;
            border-color: $color_7;
            svg{
              &.svgHover{
                display: inline-block;
              }
              &.svgNormal{
                display: none;
              }
            }
          }
          
        }
      }
    }
   

    >div{
      float: left;
      width: 110px;
      height: 110px;
      margin-right: 16px;
      margin-bottom: 16px;
      position: relative;
      .el-image{
        border-radius: 4px;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
      &:nth-of-type(5n){
        margin-right: 0;
      }
      p{
        position: absolute;
        top: -4px;
        right: -4px;
        width: 12px;
        height: 12px;
        &:hover{
          .svgNormal{display: none;}
          .svgHover{display: inline-block;}
        }
      }
      svg {
        position: absolute;
        width: 14px;
        height: 14px;
        &.svgHover{display: none;}
        cursor: pointer;
      } 
    }
    .el-image:nth-of-type(6n){
      margin-right: 0;
    }
  }

  .form_success{
    width: $formW;
    margin: auto;
    box-shadow: 0 0 8px 0 rgba(25, 25, 25, 0.12);
    border-radius: 16px;
    overflow: hidden;
    font-size: 14px;
    background-color: $color_9;
    z-index: 10;
    position: relative;
    text-align: center;
    padding: 0px 40px;
    display: flex;
    align-items: center;

   
    .svgNormal{
      width: 136px;
      height: 136px;
    }
    .form_success_t{
      padding: 32px 0 8px;
      color: $color_7;
      font-size: 24px;
    }
    .form_success_tip{
      color: $color_8;
      font-size: 14px;
    }
  }
}

.concatUs{
  @include respond('768'){
    .el-form{
      width: calc(100% - 40px);
      .module_title{
        padding: 16px;
        .module_title_t{
          font-size: 20px;
          padding-bottom: 6px;
        }
        .module_title_s{
          font-size: 12px;
        }
      }
      .module_form{
        padding: 24px 16px;
        .module_form_label{}
        .btn_module{
          margin-top: 32px;
          .el-button{
            &.next{
              width: calc(33.3% - 6px);
              margin-right: 6px;
            }
            &.submit{
              width:calc(66.7% - 6px);
              margin-left: 6px;
            }
          }
        }
      }
      .module_link{
        padding: 0 16px 24px;
      }
      .image_div{
        >div{
          width: calc(33.3% - 8px);
          padding-bottom: calc(33.3% - 8px);
          height: 0;
          margin-right: 8px;
          &:nth-of-type(3n){
            margin-right: 0;
          }
          &:nth-of-type(5n){
            margin-right: 8px;
          }
        }
        
      }
    }
    .form_success{
      width: calc(100% - 40px);
      padding: 40px 16px ;
      .svgNormal{
        width: 96px;
        height: 96px;
      }
      .form_success_t{
        font-size: 20px;
        padding: 16px 0 6px;
      }
    }
  }
}

.select_contactus.el-select-dropdown.el-popper{
  @include respond('768'){
    width: calc(100% - 72px);
    .el-select-dropdown__list .el-select-dropdown__item{
      white-space: break-spaces;
    }
  }
}